<template>
	<om-page :title="pageTitle">
		<view class="desc-charts om-btn-color">
			<view class="allchart"><a @click="searchHandle">查询</a></view>
		</view>
		<!-- <ot-sl-filter :ref="'slFilter'" :topFixed="true" :menuList="filterList" @result="onChangeFilter" /> -->
		<view class="desc-chart">
			<view class="descFilter">{{ descFilter }}</view>
			<view class="allchart"><a @click="getChartList">指标图表</a></view>
		</view>
		<view class="nodata" v-show="dataList.length == 0 && dataStatus">{{ '暂无数据！' }}</view>
		<view class="page__bd" style="margin-top: 102px;">
			<uni-list>
				<view v-for="(item, index) in dataList" :key="index" class="item">
					<uni-list-item
						:title="'指标代码：'+item.orderNumStr"
						:avatar="index + 1"
						:avatarBgColor="calcBgColor(item)"
						@click="openPopup(item)"
					>
					<view slot="note">
						<view>指标名称：{{item.indexName}}</view>
						<view>目标值：{{item.targetValueName}}</view>
						<view>岗位任职人员：{{item.dutyUserName}}</view>
						<view>责任岗位：{{item.dutyPosName}}</view>
						<view>评价频次：{{item.checksName}}</view>
						<view>考核权重：{{item.weight ? item.weight+'%' : ''}}</view>
						<view>累计执行数：{{ item.yearComplete }}</view>
						<view style="height: 32px; line-height: 32px;">指标定义：<view class='radius light bg-blue zbbtn' @click.stop="getoLink(item)" style="text-align: center;">查看</view></view>
						<!-- <view style="text-align: right;">
							<view class='cu-tag sm radius light bg-blue zbbtn' @click.stop="getoLink(item)">指标定义</view>
						</view> -->
					</view>
					</uni-list-item>
				</view>
			</uni-list>
		</view>
		<tui-scroll-top :scrollTop="scrollTop" style="background: rgba(124, 174, 255, 0.5)"></tui-scroll-top>
		<uni-popup  id="popup" ref="popup" :type="'center'">
			<view class="popup-cotent padding">
				<view class="margin popup-tip">
					请选择查询项目
				</view>
				<view  class="popup-item padding" @click="infoTab()">
					<text>指标详情</text>
					<uni-icons :size="20" class="uni-icon-wrapper" color="#bbb" type="arrowright" />
				</view>
				<view  class="popup-item padding" @click="infoChart()">
					<text>指标图表</text>
					<uni-icons :size="20" class="uni-icon-wrapper" color="#bbb" type="arrowright" />
				</view>
				<view  class="popup-item padding" @click="infoWork()">
					<text>相关工作项</text>
					<uni-icons :size="20" class="uni-icon-wrapper" color="#bbb" type="arrowright" />
				</view>
				<!-- <view  class="popup-item padding">
					<text>资源需求</text>
					<uni-icons :size="20" class="uni-icon-wrapper" color="#bbb" type="arrowright" />
				</view> -->
				<view class="margin flex justify-end" @click="cancel">
					<a class="cancel-btn">取消</a>
				</view>
			</view>
		</uni-popup>
		<uni-popup id="popup2" ref="popup2" :type="'center'">
			<view class="popup-cotent padding">
				<view class="popup-item padding">
					<text class="popup-text">单位</text>
					<picker @change="orginChange" mode="selector" :range="orginList" range-key="shortName" :value="orginIndex">
						<view class="popup-select">{{ orginList.length >0 ? orginList[orginIndex].shortName : '请选择'}}</view>
					</picker>
					<uni-icons :size="20" class="uni-icon-wrapper" color="#bbb" type="arrowright" />
				</view>
				<view class="popup-item padding">
					<text class="popup-text">年度</text>
					<picker @change="yearChange" mode="selector" :range="yearList" range-key="text" :value="yearIndex">
						<view class="popup-select">{{ yearList.length >0 ? yearList[yearIndex].text : '请选择'}}</view>
					</picker>
					<uni-icons :size="20" class="uni-icon-wrapper" color="#bbb" type="arrowright" />
				</view>
				<view class="popup-item padding">
					<text class="popup-text">机构名称</text>
					<input class="popup-input" type="text" disabled="true" v-model="searchInstName" @click="showInstTree" />
					<uni-icons :size="20" class="uni-icon-wrapper" color="#bbb" type="arrowright" />
				</view>
				<view class="popup-item padding">
					<text class="popup-text">姓名</text>
					<input class="popup-input" type="text" disabled="true" v-model="searchUserName" @click="showUserNameHandle" />
					<uni-icons :size="20" class="uni-icon-wrapper" color="#bbb" type="arrowright" />
				</view>			
				<view class="margin flex justify-end">
					<a class="cancel-btn" @click="searchSave">确定</a>
					<a class="cancel-btn" @click="searchCancel">取消</a>
				</view>
			</view>
		</uni-popup>
		<view class="showUserPopup" v-show="showInstName">
			<ot-tree-dshow :defaultLevel="true" :selectParent="true" :showCancel="true" :showConfirm="true" ref="ottree" :range="instList" rangeKey="text" @cancel="instCancel" @confirm="instConfirm"></ot-tree-dshow>
		</view>
		<view class="showUserPopup" v-show="showUserName">
			<view class="bar">
				<view class="back" @click="backHandle">返回</view>
			</view>
			<view class="om_hd_fix">
					<uni-search-bar 
					bgColorCls="bg-steelblue" 
					cancelColor="text-white"
					placeholder="请输入关键字查询" 
					:focus="true" 
					@confirm="confirmKey">
				 </uni-search-bar>
			</view>
			<uni-list style="height: 100%; overflow: auto; padding-top: 50px;">
				<view v-for="(item, index) in searchList" :key="index">
					<uni-list-item
						showArrow
						:title="item.username"
						@click="zinfoTab(item, index)"
					></uni-list-item>
				</view>
			</uni-list>
		</view>
	</om-page>
</template>

<script>
	import {
		mapState
	} from 'pinia';
	import {
		useLoginUserStore
	} from '@/stores/login-user.js';
	import { ignoreHtml } from '@/static/js/common.js';
	export default {
		data() {
			return {
				dataStatus: false,
				isFlagNum: 0,
				descFilter: '',
				selectYear: '',
				pageTotal: 1,
				pageNum: 1,
				pageSize: 20,
				scrollTop: 0,
				pageTitle:"指标查询",
				dataList: [],
				dataItem: {},
				yearList: [],
				yearIndex: 0,
				orginList: [],
				orginIndex: 0,
				searchInstId: '',
				searchInstName: '',
				searchUserId: '',
				searchUserName: '',
				zOrginId: '',
				zOrginName: '',
				zUserId: '',
				zUserName: '',
				zInstId: '',
				zInstName: '',
				showInstName: false,
				instList: [],
				showUserName: false,
				keyword: '',
				searchList: [],
			};
		},
		provide() {
			return {
				searchKey: this
			}
		},
		computed: {
			...mapState(useLoginUserStore, ['salaryInstName', 'userName'])
		},
		methods: {
			getChartList(){
				let _that = this;
				uni.navigateTo({
				    url: 'quota-chartlist?year='+ _that.selectYear +'&orgin='+ _that.zOrginId + '&instIds=' + _that.zInstId + '&userId=' + _that.zUserId
				})
			},
			cancel(){
				this.$refs.popup.close()
			},
			calcBgColor(item) {
				return this.ColorList[3].name
			},
			openPopup(item){
				this.$refs.popup.open()
				this.dataItem = item
			},
			infoWork(){
				let _that = this;
				let item = _that.dataItem
				let obj = {
					page: 1,
					rows: 20,
					indexId: item.indexId,
					orgin: _that.zOrginId,
					instIds: _that.zInstId,
					userId: _that.zUserId,
				};
				_that.om.request("tkeyWorkList/getTreeGrid",obj).then(res=>{
					if(res.rows.length>0){
						uni.navigateTo({
						    url: '/pages/search/workitem-search/workitem-search?indexId=' + item.indexId + '&userId=' + _that.zUserId + '&userName=' + _that.zUserName + '&instIds=' + _that.zInstId + '&instName=' + _that.zInstName
						})
					}else{
						_that.om.toast('无关联工作项！');
					}
				})
			},
			infoChart(){
				let _that = this;
				let item = _that.dataItem
				uni.navigateTo({
				    url: 'quota-chart?year='+ item.year +'&posId='+ item.dutyPosId + '&indexId=' + item.indexId
				})
			},
			infoTab(){
				let _that = this;
				let item = this.dataItem
				let title = item.busName
				
				_that.om.request("ttableColumn/getGridModel",{
					tableMark: 'KEY_169'
				}).then(res=>{
					let col = res.value.columns[0]
					let arr = [{
						name: '指标代码',
						value: item.orderNumStr
					},{
						name: '指标名称',
						value: item.indexName
					}];
					for(let i=0; i<col.length; i++){
						let obj = {};
						obj.name = col[i].title
						if(typeof(item[col[i].field]) == "string"){
							obj.value = ignoreHtml(item[col[i].field])
						}else{
							obj.value = item[col[i].field]
						}
						
						arr.push(obj)
					}
					arr.push({
						name: '编码',
						value: item.busCode
					})
					_that.om.getPageInfo(arr, title, {});
				})
			},
			getoLink(item){
				let _that = this;
				_that.om.request("indexDict/getIndexDefine",{
					indexId: item.indexId,
				},'post').then(res=>{
					if(res.succeed == true){
						uni.showModal({
							title: '指标定义',
							content: res.value,
							showCancel: false,
							success(zres){
								
							}
						})
					}else{
						_that.om.toast(res.msg);
					}
				})
			},
			confirmKey(e){
				let _that = this
				if (e.value) {
				  if (!_that.keyword || (_that.keyword && _that.keyword != e.value.trim())) {
					_that.keyword = e.value.trim()
					_that.getUserList()
				  }
				} else {
				  _that.keyword = ''
				  _that.getUserList()
				}
			},
			getUserList(){
				let _that = this;
				_that.om.request("indexList/getUserList",{
					year: _that.yearList[_that.yearIndex].text,
					instId: '',
					q: _that.keyword
				}).then(res=>{
					res.map(e=>e.searchtit = e.username)
					res.map(e=>e.searchid = e.id)
					_that.searchList = res
				})
			},
			zinfoTab(item, index){
				this.searchUserId = item.id
				this.searchUserName = item.username
				this.searchInstId = ''
				this.searchInstName = ''
				this.showUserName = false
			},
			getDataList(data,isinit){
				let _that = this;
				let obj = data || {};
				if(isinit){
					obj.initFlag = true
					_that.isFlagNum = 1
				}
				_that.om.request("indexList/getMobileData",obj).then(res=>{
					_that.dataList = _that.dataList.concat(res.value.pager.rows)
					_that.dataStatus = true
					_that.pageTotal = res.value.pager.totalPage
					if(isinit){
						if(res.value.request){
							if(res.value.request.userId){
								_that.searchUserId = res.value.request.userId
								_that.searchUserName = _that.userName
								_that.zUserId = res.value.request.userId
								_that.zUserName = _that.userName
								_that.descFilter =  _that.zOrginName + _that.userName + _that.selectYear + '年度指标'
								
								// _that.filterList[3].defaultSelectedValue = res.value.request.userId
								// _that.filterList[3].defaultSelectedText = _that.userName
								// _that.filterList[3].title = _that.userName
								// _that.descFilter = _that.filterList[0].detailList[_that.filterList[0].defaultSelectedIndex].title + _that.filterList[3].defaultSelectedText + _that.selectYear+'年度指标'
							}
							if(res.value.request.instIds){
								_that.searchInstId = res.value.request.instIds
								_that.searchInstName = _that.salaryInstName
								_that.zInstId = res.value.request.instIds
								_that.zInstName = _that.salaryInstName
								_that.descFilter =  _that.zOrginName + _that.salaryInstName + _that.selectYear + '年度指标'
								
								// _that.filterList[2].defaultSelectedValue = res.value.request.instIds
								// _that.filterList[2].defaultSelectedText = _that.salaryInstName
								// _that.filterList[2].title = _that.salaryInstName
								// _that.descFilter = _that.filterList[0].detailList[_that.filterList[0].defaultSelectedIndex].title + _that.filterList[2].defaultSelectedText + _that.selectYear+'年度指标'
							}
						}
					}else{
						
					}
				})
			},
			// onChangeFilter(data){
			// 	let _that = this;
			// 	_that.dataList = []
			// 	_that.dataStatus = false
			// 	data.year = parseInt(data.year) || ''
			// 	_that.selectYear = data.year
			// 	data.page = 1
			// 	data.rows = _that.pageSize
			// 	if(data.instIds){
			// 		_that.descFilter = _that.filterList[0].detailList[_that.filterList[0].defaultSelectedIndex].title + _that.filterList[2].defaultSelectedText + _that.selectYear+'年度指标'
			// 		_that.filterList[3].defaultSelectedValue = ''
			// 		_that.filterList[3].defaultSelectedText = ''
			// 		_that.filterList[3].title = '姓名'
			// 	}else if(data.userId){
			// 		let uname = ''
			// 		for(let i=0; i<_that.filterList[3].detailList.length; i++){
			// 			if(_that.filterList[3].detailList[i].searchid == data.userId){
			// 				uname = _that.filterList[3].detailList[i].searchtit
			// 			}
			// 		}
			// 		_that.descFilter = _that.filterList[0].detailList[_that.filterList[0].defaultSelectedIndex].title + uname + _that.selectYear+'年度指标'
			// 		_that.filterList[3].defaultSelectedValue = data.userId
			// 		_that.filterList[3].defaultSelectedText = uname
			// 		_that.filterList[3].title = uname
			// 		_that.filterList[2].defaultSelectedValue = ''
			// 		_that.filterList[2].defaultSelectedText = ''
			// 		_that.filterList[2].title = '部门'
			// 	}else{
			// 		_that.descFilter = _that.filterList[0].detailList[_that.filterList[0].defaultSelectedIndex].title + _that.selectYear+'年度指标'
			// 	}

			// 	if(_that.isFlagNum == 1){
			// 		_that.getDataList(data)
			// 	}else{
			// 		_that.isFlagNum = _that.isFlagNum + 1
			// 	}
			// },
			// changeArr(otit, ntit, oval, nval, data){
			// 	for(let i=0; i<data.length; i++){
			// 		if(otit){
			// 			data[i][ntit] = data[i][otit]
			// 		}
			// 		if(oval){
			// 			data[i][nval] = data[i][oval]
			// 		}
			// 	}
			// 	return data;
			// },
			searchHandle(){
				this.$refs.popup2.open()
			},
			orginChange: function(e) {
				this.orginIndex = e.detail.value
			},
			yearChange: function(e) {
				this.yearIndex = e.detail.value
				this.selectYear = this.yearList[this.yearIndex].text
			},
			showInstTree(){
				this.showInstName = true
				this.$refs.ottree._show();
			},
			instConfirm(selectList){
				let _that = this;
				if(selectList.length>0){
					_that.searchInstId = selectList[0].id
					_that.searchInstName = selectList[0].text
					_that.searchUserId = ''
					_that.searchUserName = ''
				}else{
					_that.searchInstId = ''
					_that.searchInstName = ''
				}
				_that.showInstName = false
			},
			instCancel(){
				this.showInstName = false
			},
			backHandle(){
				this.showUserName = false
			},
			showUserNameHandle(){
				this.showUserName = true
			},
			searchSave(){
				let _that = this;
				
				_that.pageNum = 1;
				_that.dataList = []
				_that.dataStatus = false
				_that.selectYear = _that.yearList[_that.yearIndex].text
				_that.zOrginId = _that.orginList[_that.orginIndex].id
				_that.zOrginName = _that.orginList[_that.orginIndex].shortName
				_that.zUserId = _that.searchUserId
				_that.zUserName = _that.searchUserName
				_that.zInstId = _that.searchInstId
				_that.zInstName = _that.searchInstName
				
					if(_that.zInstId){
						_that.descFilter =_that.zOrginName + _that.zInstName + _that.selectYear + '年度指标'
					}else if(_that.zUserId){
						_that.descFilter = _that.zOrginName + _that.zUserName + _that.selectYear + '年度指标'
					}else{
						_that.descFilter = _that.zOrginName + _that.selectYear + '年度指标'
					}
				
				if(_that.isFlagNum == 1){
					
				}else{
					_that.isFlagNum = _that.isFlagNum + 1
				}
				
				let obj={
					page: _that.pageNum,
					rows: _that.pageSize,
					year: _that.selectYear,
					orgin: _that.zOrginId,
					instIds: _that.zInstId,
					userId: _that.zUserId,
				}
				
				_that.getDataList(obj)
				this.$refs.popup2.close()
			},
			searchCancel(){
				this.$refs.popup2.close()
			},
		},
		onLoad(data) {
			let _that = this;
			
			uni.setNavigationBarTitle({
				title: '指标查询'
			});
			
			let arr = [_that.om.request("common/findYearList",{
				berfore: 2,
				after: 0,
			}), _that.om.request("torganization/getOrgList"),
			 _that.om.request("tinstitution/getComboTree")]
			//多个AJAX全部完成时开始执行
			Promise.all(arr).then(res => {
				// _that.filterList[1].detailList = _that._.cloneDeep(_that.changeArr('text', 'title', null, null, res[0]))
				// _that.filterList[1].defaultSelectedIndex = res[0].length > 0 ? res[0].length - 1 : 0
				// _that.selectYear = _that.filterList[1].detailList[_that.filterList[1].defaultSelectedIndex].value
				// _that.filterList[0].detailList = _that._.cloneDeep(_that.changeArr('shortName', 'title', 'id', 'value', res[1]))
				// _that.filterList[2].detailList = _that._.cloneDeep(res[2])
				// _that.filterList[3].detailList = []
				// _that.$refs.slFilter.resetMenuList(_that.filterList)
				_that.yearList = res[0]
				_that.yearIndex = res[0].length-1
				_that.selectYear = _that.yearList[_that.yearIndex].text
				_that.orginList = res[1]
				_that.orginIndex = 0
				_that.zOrginId = _that.orginList[_that.orginIndex].id
				_that.zOrginName = _that.orginList[_that.orginIndex].shortName
				_that.instList = res[2]
				_that.descFilter =  _that.zOrginName + _that.selectYear + '年度指标'
				
				if(data.indexId){
					let obj={
						page: _that.pageNum,
						rows: _that.pageSize,
						indexId: data.indexId,
						orgin: _that.zOrginId,
						instIds: data.instIds,
						userId: data.userId,
					}
					
					_that.searchInstId = data.instIds
					_that.searchInstName = data.instName
					_that.zInstId = data.instIds
					_that.zInstName = data.instName
					_that.searchUserId = data.userId
					_that.searchUserName = data.userName
					_that.zUserId = data.userId
					_that.zUserName = data.userName
					_that.getDataList(obj)
				}else if(data.targetId){
					let obj={
						page: _that.pageNum,
						rows: _that.pageSize,
						targetId: data.targetId,
						orgin: _that.zOrginId,
						instIds: data.instIds,
						userId: data.userId,
						year: data.year,
					}
					_that.selectYear = data.year
					for(let i=0;i<_that.yearList.length;i++){
						if(_that.yearList[i].value == _that.selectYear){
							_that.yearIndex = i
						}
					}
					
					_that.searchInstId = data.instIds
					_that.searchInstName = data.instName
					_that.zInstId = data.instIds
					_that.zInstName = data.instName
					_that.searchUserId = data.userId
					_that.searchUserName = data.userName
					_that.zUserId = data.userId
					_that.zUserName = data.userName
					_that.getDataList(obj)
				}else{
					let obj={
						page: _that.pageNum,
						rows: _that.pageSize,
						year: _that.selectYear,
						orgin: _that.zOrginId,
					}
					_that.getDataList(obj,true)
				}
				
			})
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop
		},
		// 页面上拉触底事件的处理函数
		onReachBottom: function() {
			let _that = this;
			if(_that.pageTotal>_that.pageNum){
				_that.pageNum++
				let obj = {
					year: _that.selectYear,
					orgin: _that.zOrginId,
					instIds: _that.zInstId,
					userId: _that.zUserId,
					page: _that.pageNum,
					rows: _that.pageSize
				}
				_that.getDataList(obj)
			}
		}
	};
</script>

<style>
	.zbbtn{
		width: 64px; 
		height: 32px;
		line-height: 32px;
		font-size: 12px;
		display: inline-block;
		margin: 0 5px;
	}
	.popup-item{
		height:50px;
		background-color: #FFFF;
		font-size: 16px;
		text-align: center;
		border-bottom: 1px solid #EEEEEE;
		display: flex;
		justify-content: space-between;
	}
	.popup-cotent{
		width: 300px;
		background-color: white;
		border-radius: 10px;
	}
	.popup-tip{
		font-size: 16px;
		color:#b0b0b0 ;
	}
	.desc-chart{
		position: fixed;
		top: 51px;
		line-height: 50px;
		padding: 0 15px;
		font-size: 14px;
		border-bottom: #EEEEEE 1px solid;
		display: flex;
		z-index: 99;
		width: 100%;
		background: #FFF;
	}
	.allchart{
		width: 72px;
	}
	.allchart a{
		display: block;
		width: 68px;
		height: 26px;
		line-height: 26px;
		text-align: center;
		display: block;
		color: #0081ff;
		background-color: #cce6ff;
		margin: 12px 0 12px 4px;
	}
	.descFilter{
		flex:1;
	}
	.cancel-btn{
		text-align: center;
		display: block;
		color: #0081ff;
		background-color: #cce6ff;
		height: 36px;
		line-height: 36px;
		width: 72px;
		margin: 15px auto 0;
	}
	.nodata{
		width: calc(100% - 30px);
		margin: 130px 15px 0;
		height: 26px;
		line-height: 26px;
		background: none;
		text-align: center;
	}
	.desc-charts{
		position: fixed;
		top: 0;
		/* line-height: 50px;
		padding: 0 15px; */
		font-size: 14px;
		border-bottom: #EEEEEE 1px solid;
		/* display: flex; */
		z-index: 99;
		width: 100%;
	}
	.desc-charts .allchart{
		width: 100%;
	}
	.desc-charts .allchart a{
		float: right;
		display: block;
		width: 68px;
		height: 26px;
		line-height: 26px;
		text-align: center;
		display: block;
		color: #000;
		background-color: #fff;
		margin: 12px 15px 12px 4px;
	}
	.popup-text{
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		width: 80px;
	}
	.popup-select{
		border: 0;
		width: 150px;
		height: 19px;
		line-height: 19px;
		background: none;
		appearance: none;
		text-align: right;
		text-align-last: right;
		font-size: 16px;
	}
	.popup-input{
		text-align: right;
	}
	.showUserPopup{
		position: fixed;
		top: 0px;
		left: 0px;
		right: 0px;
		bottom: 0px;
		z-index: 9998;
		background: #FFF;
		height: 100%;
	}
	
	.showUserPopup .bar{
		background-color: #fff;
		height: 36px;
		padding-left: 10px;
		padding-right: 10px;
		display: flex;
		justify-content: space-between;
		align-items: center;
		box-sizing: border-box;
		border-bottom-width: 0.5px !important;
		border-bottom-style: solid;
		border-bottom-color: #f5f5f5;
		font-size: 16px;
		color: #757575;
		line-height: 1;
	}
</style>                                                  
